<template>
  <div :style="{ ...getTextStyle(props[0].fields) }" class="timeArea">
    {{ currentTime }}
  </div>
</template>

<script>
import moment from 'moment'
import { ALIGNMENT } from '../../../common/js/vars'
export default {
  name: 'CTime',
  props: {
    props: {
      type: Array,
      default: function() {
        return [
          {
            fields: []
          }
        ]
      }
    }
  },
  computed: {
    currentTime() {
      return moment().format('YYYY-MM-DD HH:mm:ss')
    }
  },
  methods: {
    getTextStyle(item) {
      const lineHeight = item[3].value[0].value.value
      const alignment = item[3].value[1].value.value
      const fontSize = item[3].value[2].value.value
      const fontColor1 = item[3].value[3].value.value[0]
      const fontColor2 = item[3].value[3].value.value[1]
      const fontFamily = item[3].value[4].value.value
      return {
        'line-height': lineHeight + 'px',
        'text-align': ALIGNMENT[alignment],
        'font-size': fontSize + 'px',
        'font-family': fontFamily,
        'background-image': `linear-gradient(135deg, ${fontColor1}, ${fontColor2})`
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.timeArea {
	font-weight: bolder;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
</style>
